/***
 * Title: followMe.js
 * Ver: 1.0
 * Author: shengzl
 * Intro:
 *  创建多个follow模块
 */
class followMe {
    constructor(options = {}) {
        this._option = {
            _github: {
                img: "./icons/github.png",
                url: "https://github.com/alonehat"
            },
            _gitee: {
                img: "./icons/gitee.svg",
                url: "https://gitee.com/shengzl"
            },
            _twitter: {
                img: "./icons/twitter.png",
                url: "https://shengzilong.com"
            },
            _telegram: {
                img: "./icons/telegram.png",
                url: "https://www.shengzilong.com"
            },
            //格式：[{img:"",url:""},...]
            _other: [],
            //全局动画时长
            _sec: 300,
            //浮动位置：left/right
            _float: "right"
        };

        $.extend(this._option, options);

        this.Css();
        this.Els();
        this.Bind();
    }

    Css() {
        var o = this._option;

        var style = `<style>
            .fm_con{
                position: absolute;
                width: 5rem;
                top: -21vh;
                ${o._float}:0;
                z-index: 10;
                background-color:#cecece45;
            }
            .fm_con a {
                display: block;
                margin: 5%;
                margin-top: 13%;
                text-align: center;
                box-sizing: border-box;
                border:none;
                background: linear-gradient(to top, #ffffff00, #ffffff00);
                border-radius: 2px;
            }
            .fm_con span{
                display:block;
                font-size:small;
                text-align:center;
                cursor:pointer;
                font-family: fantasy;
                padding: 5%;
            }
            .fm_con img{
                max-width: 41px;
            }
            .fm_con a:hover {
                animation: ibg 0.6s ease forwards;
            }
            @keyframes ibg {
                0% {background: linear-gradient(to top,  #ffffff00, #ffffff00, #ffffff00, #ffffff00);}
                20% {background: linear-gradient(to top, #ffffff3f, #ffffff00, #ffffff00, #ffffff00);}
                40% {background: linear-gradient(to top, #ffffff7f, #ffffff3f, #ffffff00, #ffffff00);}
                60% {background: linear-gradient(to top, #ffffffbf, #ffffff7f, #ffffff3f, #ffffff00);}
                80% {background: linear-gradient(to top, #ffffff, #ffffffbf, #ffffff7f, #ffffff3f);}
                100% {
                    background: linear-gradient(to top, #ffffff, #ffffffff, #ffffffbf, #ffffff7f););
                }
            }
        </style>`;

        $("body").append(style);
    }

    Els() {
        var t = this;
        var o = t._option;
        var con = $("<nav class='fm_con'></nav>");
        if (o._github.url) {
            var el = $(`<a href="${o._github.url}" target="_blank"><img src="${o._github.img}" /></a>`);
            //append
            con.append(el);
        }
        if (o._gitee.url) {
            var el = $(`<a href="${o._gitee.url}" target="_blank"><img src="${o._gitee.img}" /></a>`);
            //append
            con.append(el);
        }
        if (o._twitter.url) {
            var el = $(`<a href="${o._twitter.url}" target="_blank"><img src="${o._twitter.img}" /></a>`);
            //append
            con.append(el);
        }
        if (o._telegram.url) {
            var el = $(`<a href="${o._telegram.url}" target="_blank"><img src="${o._telegram.img}" /></a>`);
            //append
            con.append(el);
        }
        if (o._other && o._other.length > 0) {
            //append
            o._other.forEach(el => {
                con.append($(`<a href="${el.url}" target="_blank"><img src="${el.img}" /></a>`))
            });
        }

        con.append($('<span>FollowMe</span>'));
        $("body").append(con);
    }

    Bind() {
        var t = this;
        var o = t._option;

        $(".fm_con span").on("click", function() {
            $(".fm_con").animate({ top: 0 }, o._sec, function() {

            });
        });

        $(".fm_con").on("mouseleave", function() {
            $(".fm_con").animate({ top: "-21vh" }, o._sec);
        });
    }
}